<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - 她与月亮的约定</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#A06CD5',
                        'primary-light': '#F0EAF6',
                        secondary: '#6CD5A0',
                        'text-primary': '#1A0D28',
                        'text-secondary': '#5A5165',
                        'text-tertiary': '#9D96A5',
                        'bg-page': '#F7F5F9',
                        'border-color': '#E8E2EE',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #F7F5F9;
            color: #1A0D28;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .chart-bar {
            background-color: #F0EAF6;
            border-radius: 4px 4px 0 0;
            position: relative;
            width: 24px;
        }
        
        .bottom-nav {
            box-shadow: 0 -1px 10px rgba(0,0,0,0.05);
        }
        
        .menu-item {
            transition: all 0.2s ease;
        }
        
        .menu-item:active {
            background-color: #F0EAF6;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-5 py-3 bg-white border-b border-border-color">
        <span class="text-lg font-medium text-text-primary">我的</span>
        <div class="flex items-center space-x-4">
            <svg class="w-5 h-5 text-text-secondary" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
            </svg>
            <svg class="w-5 h-5 text-text-secondary" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex-1 overflow-auto pb-20">
        <!-- 个人信息 -->
        <div class="bg-white pt-8 pb-6 flex flex-col items-center">
            <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white shadow-md">
                <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=80&h=80&fit=crop&q=80" alt="头像" class="w-full h-full object-cover">
            </div>
            <h3 class="mt-4 text-lg font-medium">张宇浩</h3>
            <p class="text-xs text-text-secondary mt-1">会员有效期至 2026-07-14</p>
            
            <!-- 会员卡片 -->
            <div class="w-11/12 mt-6 rounded-xl bg-gradient-to-r from-primary to-purple-400 text-white p-4 shadow-lg">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="text-xs opacity-80">高级会员</div>
                        <div class="text-lg font-medium mt-1">尊享特权服务</div>
                    </div>
                    <div class="bg-white/20 rounded-lg px-3 py-1 text-xs">
                        续费
                    </div>
                </div>
                <div class="mt-4 flex justify-between text-xs opacity-90">
                    <div>专属客服</div>
                    <div>数据导出</div>
                    <div>专家咨询</div>
                </div>
            </div>
        </div>

        <!-- 周期规律性分析 -->
        <div class="bg-white mt-3 p-4 shadow-sm">
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-base font-medium">周期规律性分析</h4>
                <a href="#" class="text-primary text-xs font-medium">查看详情</a>
            </div>
            
            <!-- 图表 -->
            <div class="border-t border-border-color pt-4">
                <div class="flex items-end justify-around h-40">
                    <div class="flex flex-col items-center">
                        <div class="chart-bar" style="height: 70%"></div>
                        <div class="text-xs text-text-tertiary mt-2">四月</div>
                        <div class="text-xs text-text-secondary mt-1">28天</div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="chart-bar" style="height: 80%"></div>
                        <div class="text-xs text-text-tertiary mt-2">五月</div>
                        <div class="text-xs text-text-secondary mt-1">30天</div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="chart-bar" style="height: 60%"></div>
                        <div class="text-xs text-text-tertiary mt-2">六月</div>
                        <div class="text-xs text-text-secondary mt-1">27天</div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="chart-bar bg-primary" style="height: 90%"></div>
                        <div class="text-xs text-text-tertiary mt-2">七月</div>
                        <div class="text-xs text-text-secondary mt-1">31天</div>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <div class="text-xs text-text-secondary">平均周期长度：<span class="text-primary font-medium">29天</span></div>
                    <div class="text-xs text-text-secondary mt-1">规律性：<span class="text-primary font-medium">较规律</span></div>
                </div>
            </div>
        </div>

        <!-- 设置菜单 -->
        <div class="bg-white mt-3 shadow-sm">
            <div class="menu-item flex justify-between items-center px-4 py-4 border-b border-border-color">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">设置</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
            
            <div class="menu-item flex justify-between items-center px-4 py-4 border-b border-border-color">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">通知提醒</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
            
            <div class="menu-item flex justify-between items-center px-4 py-4 border-b border-border-color">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">隐私与安全</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
            
            <div class="menu-item flex justify-between items-center px-4 py-4">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">数据导出</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>

        <!-- 其他选项 -->
        <div class="bg-white mt-3 shadow-sm">
            <div class="menu-item flex justify-between items-center px-4 py-4 border-b border-border-color">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">关于我们</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
            
            <div class="menu-item flex justify-between items-center px-4 py-4">
                <div class="flex items-center">
                    <div class="w-6 h-6 flex items-center justify-center text-primary">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <span class="ml-3 text-text-secondary">帮助与反馈</span>
                </div>
                <svg class="w-4 h-4 text-text-tertiary" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>

        <!-- 版本信息 -->
        <div class="text-center py-6">
            <p class="text-xs text-text-tertiary">版本 1.0.0</p>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav fixed bottom-0 left-0 right-0 bg-white border-t border-border-color py-2 px-6">
        <div class="flex justify-around">
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                </svg>
                <span class="text-xs mt-1">记录</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
                </svg>
                <span class="text-xs mt-1">知识</span>
            </a>
            <a href="#" class="flex flex-col items-center text-primary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html> 